<template>
	<view class="grey text" :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''">
		<tm-menubars title="Echarts示例" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="pt-14 pb-n10 round-t-8" :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-6 bk' : 'grey text  '">
			<view class="ma-32 flex-between flex-wrap">
				<navigator
					:url="item.url"
					v-for="(item, index) in list"
					:key="index"
					class=" round-10 mb-24"
					style="width: 48%;"
					:class="$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : 'white'"
				>
					<view class="flex-center flex-col pa-32">
						<tm-images :src="item.icon" :width="150"></tm-images>
						<view class="text-size-lg text-weight-b">{{ item.title }}</view>
						<view class="text-size-s py-12">{{ item.label }}</view>
						<view>
							<tm-tags size="g" model="text">{{ item.btn }}</tm-tags>
						</view>
					</view>
				</navigator>
			</view>
			<view class="flex-center">
				<tm-images :width="60"  src="static/logo_great.png"></tm-images>
				<view class="px-24"></view>
				<tm-images :width="200"  src="https://jx2d.cn/yuwuimages/tmui120.3-small.png?id=6888"></tm-images>
			</view>
			<view class="py-24 px-0 text-size-xs text-grey-lighten-1 text mx-32 text-align-center">
				本UI经过细致打磨，并且还在不断的细化中，让它成为高效率、高颜值、高覆盖率的组件库，需要各方努力贡献。
				<view>请不要盗版，可免费使用。</view>
				<view class=" text-weight-b" :class="[`text-${$tm.vx.state().tmVuetify.color || 'mytheme'}`]">
					用户Q群：
					<text selectable>18593916</text>
				</view>
			</view>
		</view>
		
		</view>
	</view>
</template>
<script>

import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
export default {
	components: {
		tmIcons,
		tmButton,
		tmTags,
		tmImages,
		tmMenubars
	},
	data() {
		return {
			list: [
				{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/line-simple.webp?_v_=1632985844682',
					title: '折线图',
					label: '基础平滑折线图',
					url: 'line?id=1_1',
					btn: '预览体验'
				},
				{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/area-stack.webp?_v_=1632985844682',
					title: '折线图',
					label: '堆叠面积图',
					url: 'line?id=1_2',
					btn: '预览体验'
				},
				{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/bar-simple.webp?_v_=1632985844682',
					title: '柱状图',
					label: '基础柱状图',
					url: 'line?id=2_1',
					btn: '预览体验'
				},
				{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/dataset-encode0.webp?_v_=1632985844682',
					title: '柱状图',
					label: '数据到坐标轴的映射',
					url: 'line?id=2_2',
					btn: '预览体验'
				},
				{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/pie-simple.webp?_v_=1632985844682',
					title: '饼图',
					label: '基本的饼图',
					url: 'line?id=3_1',
					btn: '预览体验'
				},{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/pie-roseType-simple.webp?_v_=1632985844682',
					title: '饼图',
					label: '南丁格尔玫瑰图',
					url: 'line?id=3_2',
					btn: '预览体验'
				},
				{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/gauge.webp?_v_=1632985844682',
					title: '仪表盘',
					label: '基础仪表盘',
					url: 'line?id=4_1',
					btn: '预览体验'
				},{
					icon: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/thumb/gauge-stage.webp?_v_=1632985844682',
					title: '仪表盘',
					label: '阶段速度仪表盘',
					url: 'line?id=4_2',
					btn: '预览体验'
				},
			]
		};
	},

	methods: {
		gc(res) {
			// 初始化成功后返回的数据如下：
			const { width, height, chart } = res;
		},
		gc2(res) {
			// 初始化成功后返回的数据如下：
			const { width, height, chart } = res;
			this.$nextTick(function() {
				this.bh('gauge');
			});
		},
		cInitCahrt() {
			let t = this;
			this.isActive = true;
			this.bh('bar');
			this.$nextTick(function() {
				//上方隐藏了按钮，造成了位置和大小的移动，需要重绘下方的表盘。
				this.$refs.teCart2.getChart().resize();
			});
		},
		rOpts(type) {
			return {
				color: ['#38caff', '#2099e9', '#668ce3'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					confine: true
				},
				legend: {
					data: ['热度', '正面', '负面']
				},
				grid: {
					left: 20,
					right: 20,
					bottom: 15,
					top: 40,
					containLabel: true
				},
				xAxis: [
					{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#999'
							}
						},
						axisLabel: {
							color: '#666'
						}
					}
				],
				yAxis: [
					{
						type: 'category',
						axisTick: {
							show: false
						},
						data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
						axisLine: {
							lineStyle: {
								color: '#999'
							}
						},
						axisLabel: {
							color: '#666'
						}
					}
				],
				series: [
					{
						name: '热度',
						type: type,
						label: {
							normal: {
								show: true,
								position: 'inside'
							}
						},
						data: [300, 270, 340, 344, 300, 320, 310],
						itemStyle: {
							emphasis: {
								color: '#37a2da'
							}
						}
					},
					{
						name: '正面',
						type: type,
						stack: '总量',
						label: {
							normal: {
								show: true
							}
						},
						data: [120, 102, 141, 174, 190, 250, 220],
						itemStyle: {
							emphasis: {
								color: '#32c5e9'
							}
						}
					},
					{
						name: '负面',
						type: type,
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'left'
							}
						},
						data: [-20, -32, -21, -34, -90, -130, -110],
						itemStyle: {
							emphasis: {
								color: '#67e0e3'
							}
						}
					}
				]
			};
		},
		//仪表盘
		bpanOpts() {
			return {
				tooltip: {
					formatter: '{a} <br/>{b} : {c}%'
				},

				series: [
					{
						radius: '100%',
						name: 'Pressure',
						type: 'gauge',
						detail: {
							formatter: '{value}'
						},
						data: [
							{
								value: 50,
								name: 'SCORE'
							}
						]
					}
				]
			};
		},
		bh(type) {
			if (type == 'gauge') {
				let option = this.bpanOpts();
				this.$refs.teCart2.setOption(option);
			} else {
				this.$refs.teCart.setOption(this.rOpts(type));
			}
		}
	}
};
</script>

<style lang="scss"></style>
